<template>
  <div class="app-container">
    <el-row class="app-toolbar">
      <el-select class="" v-model="listParam.status" placeholder="请选择状态">
        <el-option key="0" label="全部" value=""></el-option>
        <template v-for="(item, k) in statusMap">
          <el-option v-if="k > 0" :key="k" :label="item" :value="k"></el-option>
        </template>
      </el-select>
      <div style="clear: both;"></div>
    </el-row>
    <el-row class="app-toolbar"><el-button type="primary" @click="checkBatch()" :disabled="multipleSelection.length == 0">批量通过</el-button></el-row>
    <el-table
      v-loading="listLoading"
      :data="datas"
      @selection-change="handleSelectionChange"
      :empty-text="empty_text"
      element-loading-text="Loading"
      border
      fit
      stripe
      highlight-current-row
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="序号" align="center" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="id" label="序号" align="center" width="180"></el-table-column> -->
      <el-table-column label="公司名称">
        <template slot-scope="scope">
          {{ scope.row.invoiceTitle }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="产品名称">
        <template slot-scope="scope">
          {{ scope.row.commodityName }}
        </template>
      </el-table-column> -->
      <el-table-column label="订单金额">
        <template slot-scope="scope">
          {{ scope.row.invoicePrice }}
        </template>
      </el-table-column>
      <el-table-column label="开票金额">
        <template slot-scope="scope">
          {{ scope.row.invoicePrice }}
        </template>
      </el-table-column>
      <el-table-column label="发票备注">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="时间" width="200" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.timeOfApplication }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发票信息" width="110" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="detailRow(scope.row)" size="small">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" class-name="status-col" width="110" align="center">
        <template slot-scope="scope">
          {{ statusFilter(scope.row.status) }}
          <!-- <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status < 3">
            <el-button type="text" @click="pass(scope.row, 3)" size="small">通过</el-button>
            <el-button type="text" @click="checkRow(scope.row, 2)" size="small">驳回</el-button>
          </template>
          <template v-else-if="scope.row.status == 3">
            <el-button type="primary" @click="sendFormRow(scope.row, 4)" size="small">寄出</el-button>
          </template>
          <template v-else-if="scope.row.status == 4">
            <el-button type="infor" @click="lookformRow(scope.row)" size="small">查看</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="listPages.size"
      :current-page="listPages.page"
      :total="listPages.total"
      :page-sizes="listPages.sizes"
      @size-change="_page_size_change"
      @prev-click="_page_prev_click"
      @current-change="_page_current_change"
      @next-click="_page_next_click"
    ></el-pagination>

    <el-dialog :title="checkFormDialog.title" :visible.sync="checkFormDialog.visible" :width="checkFormDialog.width" :center="checkFormDialog.center">
      <el-form :model="checkFormDialog.data">
        <div class="el-tips">
          <i class="el-icon-warning" style="color: #1989fa;"></i>
          <span>你确定要驳回该发票吗？驳回后，不能更改</span>
        </div>
        <el-form-item><el-input v-model="checkFormDialog.data.reason" type="textarea" placeholder="请输入驳回理由" maxlength="50" show-word-limit rows="6" /></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkFormDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="turnDown">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="sendformDialog.title" :visible.sync="sendformDialog.visible" :width="sendformDialog.width" :center="sendformDialog.center">
      <el-form :model="sendformDialog.data">
        <el-form-item label="快递公司" :label-width="formLabelWidth"><el-input v-model="sendformDialog.data.waybillNumber" :disabled="sendformDialog.disabled" /></el-form-item>
        <el-form-item label="快递单号" :label-width="formLabelWidth"><el-input v-model="sendformDialog.data.invoiceNo" :disabled="sendformDialog.disabled" /></el-form-item>
      </el-form>
      <span v-show="!sendformDialog.disabled" slot="footer" class="dialog-footer">
        <el-button @click="sendformDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="_sendformSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
<style lang="scss" scoped src="./index.scoped.scss"></style>
